<template>
    <el-dialog :title="dialogTitle" :visible="dialogVisible" @close="dialogClose">
    
     <el-form :model="stuForm" :rules="stuRules" ref="addStuRuleForm">
         <!-- name用于传递参数 和 action发送请求 结合使用  -->
     <el-form-item label="头像">
				<el-upload class="uploadAvatar"
					ref="uploadAvatar"
					action="https://chst.vip/students/uploadStuAvatar"
          	name="headimgurl"
					list-type="picture-card"
					:on-success="uploadSuccess"
					:on-remove="removeAvatar"
					:limit="limit"
					:file-list="headimgList"
					:multiple="false">
					<i class="el-icon-plus"></i>
				</el-upload>
			</el-form-item>
     
     <el-form-item prop="name" label="姓名" :label-width="formLabelWidth">
      <el-input v-model="stuForm.name" autocomplete="off"></el-input>
     </el-form-item>
    
     <el-form-item prop="productUrl" label="项目地址" :label-width="formLabelWidth">
      <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
     </el-form-item>

      <el-form-item prop="class" label="班级" :label-width="formLabelWidth">
      <el-input v-model="stuForm.class" autocomplete="off"></el-input>
     </el-form-item>

      <el-form-item prop="age" label="年龄" :label-width="formLabelWidth">
      <el-input v-model="stuForm.age" autocomplete="off"></el-input>
     </el-form-item>

      <el-form-item prop="city" label="城市" :label-width="formLabelWidth">
      <el-input v-model="stuForm.city" autocomplete="off"></el-input>
     </el-form-item>

      <el-form-item prop="degree" label="学历" :label-width="formLabelWidth">
      <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
     </el-form-item>

      <el-form-item prop="description" label="描述" :label-width="formLabelWidth">
      <el-input v-model="stuForm.description" autocomplete="off"></el-input>
     </el-form-item>
  </el-form>
  
  <div slot="footer" class="dialog-footer">
    <el-button @click="HIDE_DIALOG">取 消</el-button>
    <el-button type="primary" @click="confirmClick('addStuRuleForm')">确 定</el-button>
  </div>
</el-dialog>

</template>
<script>
import {mapState,mapMutations,mapActions} from "vuex"
import * as stuApi from "../../api/studentManage"
  export default {
      computed: {
        ...mapState(['dialogVisible','dialogTitle','currentRow']),  
      },
      methods: {
        ...mapMutations(['SHOW_DIALOG','HIDE_DIALOG','CHANGE_DIALOGTITLE']),  
        ...mapActions(['GET_STULIST']),
        dialogClose(){//dialog关闭时触发
            this.HIDE_DIALOG();//关闭dialog框  visible为false会触发close事件
            // 清空dialog表单数据
            this.stuForm={...this.oldForm};
            // 清空回显头像的数组
            this.headimgList=[];
            this.limit=1;
            // console.log(111); 
           },

        // 提交表单
        confirmClick(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    //表单校验成功 
                    // 关闭dialog
                    // console.log(1111);
                    this.HIDE_DIALOG()
                    // 发送请求 问题：如何知道点击确定的时候此时请求增加接口还是编辑接口
                    if(this.dialogTitle==="添加学员信息"){
                        // 发起增加请求
                        // console.log(this.stuForm);//这就是表单中收集到的用户输入数据
                        stuApi.addStuApi(this.stuForm).then(res=>{
                            // console.log(res);
                            if(res.data.state){
                                //增加成功
                                // console.log(res);
                            //   重新发起请求，更新表格内容
                            this.GET_STULIST()
                            this.$message.success('添加成功')
                            }else{
                                // 增加失败
                                this.$message.error('添加失败')
                            }
                        })
                    }else{
                        // 发起编辑请求
                        // 因为current传过来的数据包含了sid
                        stuApi.updateStuApi(this.stuForm).then(res=>{
                            // console.log(res);
                            if(res.data.state){
                                // 修改成功，更新视图
                                this.GET_STULIST()
                                this.$message.success('修改成功')
                            }else{
                                // 更新失败，比如更新的时候这条消息被别人删除
                                this.$message.error("更新失败，数据不存在或者没有做任何修改")
                                this.GET_STULIST()//不存在的时候帮忙刷新掉
                            }
                        })
                    }
                }else{
                    this.$message.error('请将内容填写完整')
                }
            })
        },
        // 图片上传成功触发的钩子
         uploadSuccess(r){
            //  console.log(r);
            if(r.state){
                // 把返回来的图片地址添加给stuForm传给服务器保存到数据库
                this.stuForm.headimgurl=r.headimgurl;
                if(this.dialogTitle==="编辑学员信息"){
                      setTimeout(()=>{ 
                    // 把headimgList列表内容设置为当前项
                     this.headimgList=[{url:r.headimgurl}]
                },500)
                } 
            }else{
                   this.$message.error('上传失败') 
            }
        },
        removeAvatar(r){

        },
      },
     data() {
        return {
          headimgList:[],//回显的头像
          limit:1,//上传文件的数量
          stuForm: {
            name: '',
            productUrl:'',
            headimgurl:'',
            class:'',
            age:'',
            city:'',
            degree:'',
            description:''
        },
        oldForm:{},//储存stuForm的初始值，便于后续清空dialog内容
        stuRules:{
            name: [{required:true,message:'请输入名字',trigger:'blur'}],
            productUrl:[{required:true,message:'请输入地址',trigger:'blur'}],
            class:[{required:true,message:'请输入班级',trigger:'blur'}],
            age:[{required:true,message:'请输入年龄',trigger:'blur'}],
            city:[{required:true,message:'请输入城市',trigger:'blur'}],
            degree:[{required:true,message:'请输入学历',trigger:'blur'}],
            description:[{required:true,message:'请输入描述',trigger:'blur'}],
        },
        formLabelWidth: '120px'
      };
    },
    watch:{
        // 监听传入的row的数据变化
          currentRow(newVal){
            // console.log(newVal);
            // 如果dialogTitle等于编辑学员信息，那么就要做数据回显
             // 数据回显从vuex中获取回显的数据
             this.stuForm=this.currentRow//回显变化的row
            // 回显头像
            this.headimgList=[{url:this.currentRow.headimgurl}]
            // 编辑的时候让limit变成2
            this.limit=2;
        }
    },
    created () {
        //储存stuForm的初始值，便于后续清空dialog内容
        this.oldFrom={...this.stuForm}
    }
  };
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
